<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式1</title>
</head>
<body>

    <p>多元素选择器1</p>
    <font>多元素选择器1</font>

    <div id="div3">
    <span>后代元素选择器-子元素</span>
    <div>
    <span>后代元素选择器-孙子元素</span>
    </div>
    </div>

    <table>
    <tr><td><span></span><img></td></tr>
    </table>

    <div id="div4">
    <span>子元素选择器-子元素</span>
    <div>
    <span>子元素选择器-孙子元素</span>
    </div>
    </div>

    <div>
    毗邻元素选择器
    </div>

    <style>
/*5.多元素选择器
同时匹配所有元素和font元素，p和font之/间使用逗号分隔*/

p,font{
color:greenyellow;
}


/*6.后代元素选择器，匹配所有id为div3的元素后代span元素，中间使用空格分隔*/
#div3 span{
color:plum;
}
 

/*,子元素选择器
匹配所有id为div04的子元系span*/

#div4 > span{
color:aqua;
}

/*.8.毗邻元素选择器
匹配所有紧d为div4的元素之后的同级元素div*/

#div4+div{
background-color:aqua;
color:white;
}
    </style>
</body>
</html>